<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <!--      使用连接的时候从根目录开始-->
    <base th:href="${#request.getContextPath() + '/'}">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
          integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <!-- Google fonts - Popppins for copy-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,800">
    <!-- orion icons-->
    <link rel="stylesheet" href="/css/orionicons.css">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="/css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="/css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="/img/favicon.png?3">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<style>
    .form-control-label {
        top: 10px;
        font-size: .9rem;
        color: #6c757d;
        padding-left: 180px;
    }
</style>
<body>


<!-- navbar-->
<div th:replace="publicheader::header"></div>
<div class="d-flex align-items-stretch">
    <div id="sidebar" class="sidebar py-3">
        <div class="text-gray-400 text-uppercase px-3 px-lg-4 py-4 font-weight-bold small headings-font-family">MAIN
        </div>
        <div th:replace="publicsidebar::sidebar"></div>
    </div>
    <div class="page-holder w-100 d-flex flex-wrap">
        <div class="container-fluid px-xl-5">

            <div class="col-lg-12 mb-5" style="margin-top: 30px;">
                <div class="card">
                    <div class="card-header">
                        <h6 class="text-uppercase mb-0">学生信息表</h6>
                    </div>
                    <div class="card-body">
                        <form action="#" method="get" onsubmit="return false">
                            <table class="table table-striped card-text">
                                <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>姓名</th>
                                    <th>班级</th>
                                    <th>成绩一</th>
                                    <th>成绩二</th>
                                    <th>成绩三</th>
                                    <th>成绩四</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="s,l:${score}">
                                    <td th:text="${l.count}"></td>
                                    <td th:text="${s.stuName}"></td>
                                    <td th:text="${s.className}"></td>
                                    <td th:text="${s.one}"></td>
                                    <td th:text="${s.tow}"></td>
                                    <td th:text="${s.three}"></td>
                                    <td th:text="${s.four}"></td>
                                    <td>
                                        <button onclick="table_table(this)" th:id="${s.sId}" class="btn btn-primary"  data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">
                                            查看
                                        </button>
                                    </td>

                                </tr>
                                </tbody>
                            </table>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div th:replace="publicfooter::footer"></div>
    </div>
</div>

<!--模态框显示-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="width: 600px;height:450px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div id="main" style="margin-left: 50px; padding-top: 20px; width: 500px;height:300px;"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
            </div>
        </div>
        </div>
    </div>
</div>


<!-- 为ECharts准备一个具备大小（宽高）的Dom -->

<script type="text/javascript">

    function table_table(obj) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        myChart.setOption({
            title: {
                text: '学生成绩',
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ["成绩一", "成绩二", "成绩三", "成绩四"]
            },
            yAxis: {},
            series: [{
                name: '成绩',
                type: 'bar',
                data: [],
            }]
        });

        //加载完成后先演示动画
        // myChart.showLoading();
        //获取

        var num = [];

        $.ajax({
            url: "/classmaster/queryStudent?sId=" + obj.id,
            type: "GET",
            success: function (result) {
                for (var i = 0; i < result.length; i++) {
                    num.push(result[i]);
                }
                myChart.setOption({
                    series: [{
                        name: '成绩',
                        type: 'bar',
                        data: num,
                    }]
                });
            }
        });

        //实现模态框
        $('#myModal').modal({
            show: true
        });
    }

</script>


<footer class="footer bg-white shadow align-self-end py-3 px-xl-5 w-100" id="footerpage"></footer>
</div>
<!-- JavaScript files-->
<script src="/vendor/jquery/jquery.min.js"></script>
<script src="/vendor/popper.js/umd/popper.min.js"></script>
<script src="/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="/vendor/jquery.cookie/jquery.cookie.js"></script>
<script src="/vendor/chart.js/Chart.min.js"></script>
<script src="/js/js.cookie.min.js"></script>
<script src="/js/charts-custom.js"></script>
<script src="/js/front.js"></script>

</body>
</html>